<template>
  <div class="">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="false" title="我的"  />
    <div class="my">
      <div class="card header">
        <div class="user">
          <!-- <open-data lang="zh_CN" class="avatar" type="userAvatarUrl"></open-data> -->
          <div class="avatar">
            <image :src="userInfo.avatar" mode="widthFix" />
          </div>
          <div class="info">
            <!-- <open-data lang="zh_CN" class="nickname" type="userNickName"></open-data> -->
            <div class="nickname">{{userInfo.realname}}</div>
            <navigator url="/pageMy/list/commission" class="yong">推广佣金：{{yongjin}}元</navigator>
          </div>
        </div>
        <div class="menu">
          <navigator :url="item.url" class="menu-item" v-for="(item, index) in iconList" :key="index">
            <image class="menu-img" :src="imgBaseUrl+item.icon" mode="widthFix" />
            <view class="menu-text">{{item.text}}</view>
          </navigator>
        </div>
      </div>

      <div class="card main">
        <navigator
          :url="item.url"
          class="main-item"
          v-for="(item, index) in contentList"
          :key="index"
        >
          <text class="iconfont main-icon" :class="item.icon"></text>
          <div class="main-content">
            <text class="main-text">{{item.text}}</text>
            <text class="iconfont icon-qianjin"></text>
          </div>
        </navigator>
      </div>
      <uni-popup ref="popup" type="bottom">
        <div class="popup">
          <button class="login-btn" open-type="getUserInfo" @getuserinfo="handleLogin">授权登录</button>
          <view class="close-text" @click="handleHide">暂不登录</view>
        </div>
      </uni-popup>
      <uni-popup ref="phone" type="bottom">
        <div class="popup">
          <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="handleGetPhone">绑定手机号</button>
          <view class="close-text" @click="handleHide">暂不绑定</view>
        </div>
      </uni-popup>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      js_code: "",
      baseUrl: this.$store.state.baseUrl,
      session_key: "",
      yongjin: "0.00",
      imgBaseUrl: this.$store.state.imgBaseUrl,
      userInfo:{
        avatar: this.$store.state.imgBaseUrl + 'default_avatar.png',
        realname: '未登录'
      },
      iconList: [
        {
          icon: "wd_icon_a@2x.png",
          text: "公开咨询",
          url: "/pageMy/menu/public"
        },
        {
          icon: "wd_icon_a3@2x.png",
          text: "付费咨询",
          url: "/pageMy/menu/paidConsulting"
        },
        {
          icon: "wd_icon_a2@2x.png",
          text: "一对一咨询",
          url: "/pageMy/menu/oneByOne"
        },
        {
          icon: "wd_icon_a4@2x.png",
          text: "我的律师",
          url: "/pageMy/menu/myLawer"
        }
      ],
      contentList: [
        {
          icon: "icon-guanzhu",
          text: "我的关注",
          url: "/pageMy/list/myFlow"
        },
        {
          icon: "icon-pinglun",
          text: "我的评价",
          url: "/pageMy/list/comment"
        },
        {
          icon: "icon-zuomingxi",
          text: "佣金明细",
          url: "/pageMy/list/commission"
        },
        {
          icon: "icon-wode",
          text: "邀请好友",
          url: "/pageMy/list/invite"
        },
        {
          icon: "icon-yijianfankui",
          text: "意见反馈",
          url: "/pageMy/list/feedback"
        }
      ]
    };
  },
  onLoad() {
    uni.showLoading({
      title: "加载中"
    });
  },
  mounted() {
    uni.hideLoading();
  },
  onShow() {
    let that = this;
    // 检测微信登录状态有没有过期
    uni.checkSession({
      success() {
        // 获取佣金
        that.getYong()
      },
      fail() {
        that.wxLogin()
      }
    });
    // 检测有没有token
    let token = uni.getStorageSync("token");
    if (!token) {
      that.wxLogin()
    }
  },
  methods: {
    wxLogin() {  // 微信登录，获取code换取session_key
      let that = this
      uni.login({
        provider: "weixin",
        success: function(res) {
          that.js_code = res.code;
          that.$refs.popup.open();
        }
      });
    },
    // 获取佣金
    async getYong(){
      let that = this
      uni.request({
        url: `${that.$store.state.baseUrl}member.info`, 
        data: {
          op: 'getMember'
        },
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': uni.getStorageSync('token')
        },
        success: (res) => {
          if(res.data.code == 200){
            that.yongjin = res.data.data.list.credit1
            let id = res.data.data.list.id
            // 用户信息
            that.userInfo = res.data.data.list
            that.$store.state.userAvatar = res.data.data.list.avatar
            uni.setStorage({
              key: 'uid',
              data: id,
            });
            if(!res.data.data.list.mobile){
              // 如果没有获取手机号
              that.$refs.phone.open();
            }
          }else if(res.data.code == -1){
            that.wxLogin()
          }else if(res.data.code == -101){
            // 没有绑定手机号
            that.$refs.phone.open();
          }
        }
      });
      
    },
    handleHide() {
      this.$refs.popup.close();
      this.$refs.phone.close();
    },
    async handleGetPhone(e) {
      let mobile = e.detail.encryptedData;
      let iv = e.detail.iv;
      this.$refs.phone.close();
      let res = await this.$gh.request("member.bind_mobile", {
        data: {
          op: "addBindMobile",
          mobile,
          iv
        }
      });
      if (res.code == 200) {
        uni.showToast({
          mask: true,
          title: "绑定成功",
          icon: "none",
          duration: 2000
        });
        this.getYong()
      }
    },
    // 获取用户信息
    handleLogin(e) {
      let { rawData, signature, encryptedData, iv } = e.detail; // 敏感加密数据
      let that = this;
      uni.showLoading({
        title: '加载中'
      });
      uni.request({
        url: that.baseUrl + "account.login",
        data: {
          op: "wx_login",
          js_code: that.js_code,
          rawData,
          signature,
          encryptedData,
          iv
        },
        method: 'post',
        success: res => {
          if (res.data.code == 200) {
            uni.hideLoading();
            let { token, mobile } = res.data.data.list;
            uni.setStorageSync("token", token);
            that.$refs.popup.close();
            // 获取佣金
            this.getYong()
            if (!mobile) {
              // 如果没有获取手机号
              that.$refs.phone.open();
            }
          }
        }
      });
    }
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.my {
  padding: 40rpx 25rpx 25rpx;
  .card {
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 0rpx 0 10rpx 0rpx #cfd5f2;
  }
  .header {
    padding: 40rpx 25rpx;
    margin-bottom: 50rpx;
    .user {
      .flex();
      .avatar {
        display: block;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
      }
      .info {
        .nickname {
          display: block;
          font-size: 36rpx;
          color: @deep-color;
          margin-bottom: 20rpx;
        }
        .yong {
          font-size: 30rpx;
          color: @font-color;
        }
      }
    }
    .menu {
      .flex;
      margin-top: 50rpx;
      .menu-item {
        width: 25%;
        text-align: center;
        .menu-img {
          width: 45%;
        }
        .menu-text {
          font-size: 24rpx;
          color: @deep-color;
        }
      }
    }
  }
  .main {
    overflow: hidden;
    .main-item {
      .flex();
      align-items: flex-start;
      padding: 30rpx 20rpx 0;
      &:last-child {
        .main-content {
          border-bottom: none;
        }
      }
      .main-icon {
        color: @theme-color;
        font-size: 40rpx;
      }
      .main-content {
        .gh-between();
        flex: 1;
        margin-left: 20rpx;
        padding-bottom: 30rpx;
        border-bottom: 2rpx solid #eee;
        .main-text {
          font-size: 30rpx;
          color: @deep-color;
        }
        .icon-qianjin {
          color: @font-color;
          font-size: 30rpx;
        }
      }
    }
  }
  .popup {
    height: 230rpx;
    background-color: #fff;
    text-align: center;
    padding-top: 90rpx;
    .login-btn {
      .gh-center();
      width: 80%;
      height: 80rpx;
      margin: 0rpx auto 25rpx;
      color: #fff;
      background-color: @theme-color;
      border-radius: 40rpx;
      font-size: 36rpx;
    }
    .close-text {
      font-size: 30rpx;
      color: @font-color;
    }
  }
}
</style>